ref(gsAdmin): Rewrite `<ForkCustomerAction>` as a functional component #95399

ryan953 · 2025-07-12T21:19:19Z

Cursor helped a lot here

Related to https://github.com/getsentry/frontend-tsc/issues/42

codecov · 2025-07-12T21:24:17Z

Codecov Report

All modified and coverable lines are covered by tests ✅

✅ All tests successful. No failed tests found.

Additional details and impacted files

@@            Coverage Diff             @@
##           master   #95399      +/-   ##
==========================================
- Coverage   87.84%   87.79%   -0.05%     
==========================================
  Files       10502    10495       -7     
  Lines      608126   606018    -2108     
  Branches    23719    23719              
==========================================
- Hits       534228   532081    -2147     
- Misses      73540    73579      +39     
  Partials      358      358

ryan953 · 2025-07-14T16:56:04Z

static/gsAdmin/components/forkCustomer.tsx

+  // TODO: We should make sure that `setConfirmCallback` is a stable function
+  // before passing it in here. But because it's not memoized right now, we
+  // need to store it in a ref between renders.
+  const onConfirmRef = useRef(setConfirmCallback);


This is a big problem

cursor

Bug: Stale Callbacks in Mutation Hooks

The onConfirmRef captures a stale setConfirmCallback prop, preventing the component from registering updated confirmation callbacks from the parent. This also leads to setConfirmCallback being called repeatedly whenever the mutate function (a useEffect dependency) is recreated. Additionally, the useMutation callbacks (mutationFn, onSuccess, onError) capture stale values (e.g., regionUrl, onConfirm) from their closure. Finally, the mutationFn is defined as accepting no parameters, despite the useMutation type signature indicating it should accept AdminConfirmParams.

static/gsAdmin/components/forkCustomer.tsx#L34-L66

sentry/static/gsAdmin/components/forkCustomer.tsx

Lines 34 to 66 in 63a1c4f

    
           // need to store it in a ref between renders. 
        
           const onConfirmRef = useRef(setConfirmCallback); 
        
           const [regionUrl, setRegionUrl] = useState(''); 
        
           const api = useApi({persistInFlight: true}); 
        
           const navigate = useNavigate(); 
        
           const {mutate} = useMutation<any, RequestError, AdminConfirmParams>({ 
        
             mutationFn: () => { 
        
               const regions = getRegions(); 
        
               const region = regions.find(r => r.url === regionUrl); 
        
               return api.requestPromise(`/organizations/${organization.slug}/fork/`, { 
        
                 method: 'POST', 
        
                 host: region?.url, 
        
               }); 
        
             }, 
        
             onSuccess: (response, params) => { 
        
               const regions = getRegions(); 
        
               const region = regions.find(r => r.url === regionUrl); 
        
               navigate(`/_admin/relocations/${region?.name}/${response.uuid}/`); 
        
               onConfirm?.({regionUrl, ...params}); 
        
             }, 
        
             onError: (error: RequestError, _params) => { 
        
               if (error.responseJSON) { 
        
                 onConfirm?.({error}); 
        
               } 
        
             }, 
        
           }); 
        
           useEffect(() => { 
        
             onConfirmRef.current(mutate); 
        
           }, [mutate]);

Fix in Cursor • Fix in Web

Was this report helpful? Give feedback by reacting with 👍 or 👎

ref(gsAdmin): Rewrite <ForkCustomerAction> as a functional component

25c8e3a

github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Jul 12, 2025

vercel bot deployed to Preview July 12, 2025 21:20 View deployment

account for unstable setConfirmCallback

63a1c4f

ryan953 commented Jul 14, 2025

View reviewed changes

ryan953 marked this pull request as ready for review July 14, 2025 16:56

ryan953 requested a review from a team as a code owner July 14, 2025 16:56

vercel bot deployed to Preview July 14, 2025 16:57 View deployment

cursor bot reviewed Jul 14, 2025

View reviewed changes

ryan953 closed this Jul 15, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

ref(gsAdmin): Rewrite `<ForkCustomerAction>` as a functional component #95399

ref(gsAdmin): Rewrite `<ForkCustomerAction>` as a functional component #95399

Uh oh!

ryan953 commented Jul 12, 2025 •

edited

Loading

Uh oh!

codecov bot commented Jul 12, 2025 •

edited

Loading

Uh oh!

ryan953 Jul 14, 2025

Uh oh!

cursor bot left a comment

Uh oh!

Uh oh!

	// need to store it in a ref between renders.
	const onConfirmRef = useRef(setConfirmCallback);

	const [regionUrl, setRegionUrl] = useState('');
	const api = useApi({persistInFlight: true});
	const navigate = useNavigate();

	const {mutate} = useMutation<any, RequestError, AdminConfirmParams>({
	mutationFn: () => {
	const regions = getRegions();
	const region = regions.find(r => r.url === regionUrl);

	return api.requestPromise(`/organizations/${organization.slug}/fork/`, {
	method: 'POST',
	host: region?.url,
	});
	},
	onSuccess: (response, params) => {
	const regions = getRegions();
	const region = regions.find(r => r.url === regionUrl);
	navigate(`/_admin/relocations/${region?.name}/${response.uuid}/`);
	onConfirm?.({regionUrl, ...params});
	},
	onError: (error: RequestError, _params) => {
	if (error.responseJSON) {
	onConfirm?.({error});
	}
	},
	});

	useEffect(() => {
	onConfirmRef.current(mutate);
	}, [mutate]);

Uh oh!

ref(gsAdmin): Rewrite <ForkCustomerAction> as a functional component #95399

ref(gsAdmin): Rewrite <ForkCustomerAction> as a functional component #95399

Uh oh!

Conversation

ryan953 commented Jul 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Jul 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

ryan953 Jul 14, 2025

Choose a reason for hiding this comment

Uh oh!

cursor bot left a comment

Choose a reason for hiding this comment

Bug: Stale Callbacks in Mutation Hooks

Uh oh!

Uh oh!

ref(gsAdmin): Rewrite `<ForkCustomerAction>` as a functional component #95399

ref(gsAdmin): Rewrite `<ForkCustomerAction>` as a functional component #95399

ryan953 commented Jul 12, 2025 •

edited

Loading

codecov bot commented Jul 12, 2025 •

edited

Loading